<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../static/images/elm.ico" type="image/x-icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿了么数据分析商家</title>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="../static/js/echarts-wordcloud.min.js"></script>
    <style type="text/css">
      li a.dropdown {
        background-color: #028dd6;
      }
      li a.dropdown:hover {
        background-color: #2db0f5;
      }
      p.p1 {
          color: black;
          font-size: 25px;
          font-weight: bold;
          overflow:hidden;
          white-space:nowrap; /*不允许换行*/
          text-overflow:ellipsis;/*超出部分省略号显示*/
      }
      p.p2 {
          color: gray;
          font-size: 15px;
          font-weight: bold;
      }
      p.p3 {
          color: black;
          font-size: 15px;
          font-weight: 300;
      }
    </style>
</head>
<body >
    <!--头部-->
    <div class="container" style="font-size: 12px;height: 30px">
        <div class="pull-left" style="padding-top: 7px">您好，欢迎您光临 饿了么商家分析系统（FJNU）指定出品：Python</div>
        <div class="pull-right" style="padding-top: 8px">
          <ul class="list-inline" style="padding-right:  3px;" >
            <li style="padding: 0 1px"><a href="javascript:history.go(-1)" style="color: black" >网站首页</a></li> |
            <li style="padding: 0 1px"><a href="#" style="color: black" >收藏我们</a></li> |
            <li style="padding: 0 1px">Author:<span style="color:rgb(0, 129, 204);">FJNU 数学与信息学院 软件工程 Python小队</span></li>
          </ul>
        </div>
    </div>
    <!--导航栏-->
      <nav class="navbar"  style="background-color:#028dd6 ; border:none; border-radius: 0px ;">
        <div class="container">
            <div class="col-md-2" >
                <a  href="/" style="float: left; " ><img src="../static/images/elm.jpg" height="78px" ></a>
            </div>
            <ul class="col-md-8 nav  navbar-nav " style="margin-top: -5px;">
                <li style=" font-size:16px; width: 110px ">
                    <a class="dropdown" style="padding: 29px 0 0 38px;height:80px; color: white;" href="/">首页</a>
                </li>
                <li style=" font-size:16px; width: 110px ">
                </li>
                <li style=" font-size:16px; width: 110px ">
                </li>
            </ul>


            <div class=" col-md-2" style="padding: 0;margin: 0;">
                <a class="navbar-brand" style="text-align: center;color:rgb(53, 52, 52);"><img src="../static/images/peopel.png" height="100%" style="float: left;" >手机号<br>{{ info.telephone }}</a>
            </div>
        </div>
      </nav>

      <div class="container" style="width: 1200px;">
        <!--当前位置-->
        <div>
          <ol class="breadcrumb" style="margin: 0;padding: 0;">
              当前位置：    <li><a href="/" style="color: black;">首页</a></li>->
              <span id="nav_name"></span>
          </ol>
      </div>
        <hr>
    <!--商家-->  
      <div class="col-md-12" style="text-align: center;">
        <img id="restaurant_image" src="" alt="" width="150px" height="150px">
        <br><br>
        <p id="restaurant_name" class="p1"></p>
        <br>
      </div>
      <div class="col-md-12" style="text-align: center;">
        <p id="restaurant_info" class="p2"></p>
        <hr>
      </div>
        <div class="col-md-7">
            <div id="evaluate" style="width: 600px;height:400px;"></div>
        </div>
        <div class="col-md-5" style="height:400px;">
            <h4>好评展示（4条）</h4>
            <div id="good_comment"></div>
            <h4>差评展示（4条）</h4>
            <div id="bad_comment"></div>
        </div>
      <div class="col-md-6" >
            <div id="Monthly_sales1" style="width: 600px;height:400px;"></div>
      </div>
      <div class="col-md-6">
          <div id="Monthly_sales2" style="width: 600px;height:400px;"></div>
    </div>
    <div class="col-md-7">
          <div id="menu" style="width: 600px;height:400px;"></div>
    </div>
    <div class="col-md-5" style="text-align: center;">
        <h2>词云分析</h2>
       <div id="wordcloud" style="width: 520px;height:320px;"></div>
    </div>
    <div class="col-md-12" style="text-align: center;">
      <h2>商家建议</h2>
      <p id="recommend" style="color: rgb(253, 188, 108); font-size: 20px;font-weight: bold;"></p>
  </div>
        </div>
    <div class="container-full-about" style="background-color: #028dd6;text-align: center;">
      <br>
      <p>copyright:FJNU 数学与信息学院 软件工程 Python小队</p>
      <br>
    </div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="../static/js/data.js"></script>
    <script type="text/javascript" src="../static/js/wordcloud.js"></script>
    <script>
        function getParameter(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
            let r = location.search.substr(1).match(reg);
            if (r != null)
                return (r[2]);
            return null;
        }
        $(function () {
            let restaurant_id = getParameter("restaurant_id");
            $.ajax({
                type: "GET",
                url: "getDetailInfo",
                data: {
                    "restaurant_id": restaurant_id
                },
                dataType: "json",
                success: function(res){
                    let restaurant_info = res.restaurant_info;
                    $("#nav_name").html(restaurant_info.restaurant_name);
                    $("#restaurant_name").html(restaurant_info.restaurant_name);
                    $("#restaurant_info").html("评分" + restaurant_info.rating + " 月销量" + restaurant_info.recent_order_num + "单");
                    $("#restaurant_image").attr("src", restaurant_info.restaurant_image);
                    $("#restaurant_image").attr("alt", restaurant_info.restaurant_name);
                    // 渲染评论
                    let comments = res.restaurant_comments;
                    let good_comments = comments.good_comments;
                    let bad_comments = comments.bad_comments;
                    $.each(good_comments, function(index, obj){
                        $("#good_comment").append('<p class="p3">' + obj.rating_text + '</p>')
                    });
                    $.each(bad_comments, function(index, obj){
                        $("#bad_comment").append('<p class="p3">' + obj.rating_text + '</p>')
                    });
                    // 绘制图表
                    draw_chart(res);
                    // 商家建议
                    let foods = res.restaurant_info.food;
                    $("#recommend").html("本店的" + foods[0].food_name + "," + foods[1].food_name + "," + foods[2].food_name + "销量较好，可以在饭点多备些或者考虑将他们作为套餐销售。<br>针对客户提出的差评应及时反思，有则改之，无则加勉！")
                }
            });
        });
    </script>
</body>
</html>